<template>
  <el-tree :props="props" :load="loadNode" @node-click="nodeClick" lazy> </el-tree>
</template>

<script>
import request from '@/utils/request';
export default {
  data() {
    return {
      props: {
        label: "name",
        children: "zones",
        isLeaf: "isLeaf",
      },
      productCategory:""
    };
  },
  methods: {
    nodeClick(data,node,item){
      this.$emit('changeProductCategory',data.name,data.id)
    },
    loadNode(node, resolve) {

      if (node.level === 0) {
        setTimeout(() => {
          request.get('/product/productCategoryList',{params:{level:0}}).then(res=>{
          let productCategoryList=res.data;
          if(productCategoryList&&productCategoryList.length>0){
            return resolve(productCategoryList);
          }else{
            return resolve([])
          }
        })
        }, 100);
      }

      if (node.level === 1) {
        setTimeout(() => {
          request.get('/product/productCategoryList',{params:{level:1,pid:node.data.id}}).then(res=>{
          let productCategoryList=res.data;
          if(productCategoryList&&productCategoryList.length>0){
            return resolve(productCategoryList);
          }else{
            return resolve([])
          }
        })
        }, 100);
      }

      if (node.level === 2) {
        setTimeout(() => {
          request.get('/product/productCategoryList',{params:{level:2,pid:node.data.id}}).then(res=>{
          let productCategoryList=res.data;
          if(productCategoryList&&productCategoryList.length>0){
            return resolve(productCategoryList);
          }else{
            return resolve([])
          }
        })
        }, 100);
      }

    },
  },
};
</script>